{extend name='common/common_layout'/}
{block name='source'}
    <link rel="stylesheet" href="__HOME__/css/pages.css">
    <script src="__HOME__/js/pages.js"></script>
    <meta name="keywords" content="{$kw}">
    <meta name="description" content="{$desc}">
{/block}
{block name='title'}
    文章
{/block}
{block name='center'}

<div id="detail">
    <div class="title-banner">
        
    </div>
    <div>
        <div class="show-page" id="articles">
            {foreach $pages as $index => $item}
                {if $index < 5} 
                <div class="show-page-item">
                    <div class="item-img" style="background-image: url('{$item.image}');"></div>
                    <div class="item-desc">
                        <a href="/?{$item.hash_str}">
                            <span class="title">{$item.title}</span>
                        </a>
                        <span class="desc">
                            {$item.summary}
                        </span>
                        <span class="date">
                            {$item.updatatime}
                        </span>
                    </div>
                </div>
                {else}
                <div class="show-page-item" style="display: none;opacity: 0; max-height: 0px; overflow: hidden;">
                    <div class="item-img" style="background-image: url('{$item.image}');"></div>
                    <div class="item-desc">
                        <a href="/?{$item.hash_str}">
                            <span class="title">{$item.title}</span>
                        </a>
                        <span class="desc">
                            {$item.summary}
                        </span>
                        <span class="date">
                            {$item.updatatime}
                        </span>
                    </div>
                </div>
                {/if}
            {/foreach}
        </div>
    </div>
</div>

<!-- 查看更多按钮 -->
<div style="width: 98%;text-align: center;margin: 20px 0 20px 0;">
    <button class="layui-btn layui-btn-primary more" style="margin: 0 auto;" onclick="getMore()">查看更多资讯</button>
</div>
 
{/block}
{block name='right'}
<div class="hot-message">
    <div class="hot-title">
        <div style="height: 3vw;font-size: 1.5rem;"><img src="__IMAGE__/common/fire.png"
                style="position: relative; width: 2vw;object-fit: contain;padding-bottom: 10px;">热门推荐</div>
    </div>
    <hr class="layui-bg-gray">
    <div class="pages-hot1-container">
        <div class="pages-hot1-item pages-hot1-item1">
            <div class="item-img" style="background-image: url({$pages_hot1_1.image})"></div>
            <div class="item-title"><a
                    href="/?{$pages_hot1_1.hash_str}">{$pages_hot1_1.title}</a></div>
        </div>
        <div class="pages-hot1-item pages-hot1-item2">
            <div class="item-img" style="background-image: url({$pages_hot1_2.image})"></div>
            <div class="item-title"><a
                    href="/?'{$pages_hot1_2.hash_str}">{$pages_hot1_2.title}</a></div>
        </div>
    </div>
    
    
    <div class="pages-hot2-container">
        {foreach $pages_hot2 as $page}
        <div class="pages-hot2-item">
            <div class="item-img" style="background-image: url({$page.image});"></div>
            <div class="item-desc">
                <span class="desc-content"><a href="/?{$page.hash_str}">{$page.title}</a></span>
                <span class="desc-date">{$page.updatatime}</span>
            </div>
        </div>
        {/foreach}
    </div>
</div>

{/block}